@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-timeline';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$appearances: 'primary', 'red', 'orange', 'yellow', 'green', 'blue', 'violet', 'pink';

.trackDot {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  &[data-variant='default'] {
    @include composite-var($timeline-track-dot-event);

    border-color: $sys-neutral-decor-default;
    border-style: solid;

    @each $appearance in $appearances {
      &[data-appearance='#{$appearance}'] {
        border-color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');
      }
    }
  }

  &[data-variant='subEvent'] {
    @include composite-var($timeline-track-dot-sub-event);

    background-color: $sys-neutral-decor-default;

    @each $appearance in $appearances {
      &[data-appearance='#{$appearance}'] {
        background-color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');
      }
    }
  }
}

.trackDotContainer {
  @include composite-var($timeline-track-dot-container);

  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

